<template>
	<view class="cart">
		<pickerAddress @change="change">{{txt}}</pickerAddress>
		<view class="cart_item" v-for="(item,index) in cartList" :key='item.goods_id'>
			<view class="checkbox">
				<checkbox :checked="item.checked" @click="checkboxs(item.goods_id)" />
			</view>
			<view class="img">
				<image :src="item.imgUrl" mode="widthFix"></image>
			</view>
			<view class="handle">
				<view class="price">￥{{item.num*item.pric}}</view>
				<view class="numberBox">
					<uni-number-box :min="1" :max="item.max" v-model="item.num"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="floor">
			<view class="allcheckbox">
				<checkbox :checked="checkboxAll" @click="allCheck" />
			</view>
			<view class="allNum">
				已选：{{allNum}}件
			</view>
			<view class="allPric">
				￥{{allPric}}
			</view>
			<view class="payment">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	export default {
		data() {
			return {
				cartList: [],
				txt: '选择地址'
			}
		},
		components: {
			pickerAddress
		},
		onShow() {
			this.getCartList()
		},
		computed: {
			allPric() {
				let sum = 0
				this.cartList.forEach((item, index) => {
					if (item.checked) {
						sum += item.num * item.pric
					}
				})
				return sum
			},
			allNum() {
				let num = 0;
				this.cartList.forEach((item, index) => {
					if (item.checked) {
						num += item.num
					}
				})
				return num
			},
			checkboxAll() {
				return this.cartList.every((item, index) => item.checked == true)
			}
		},
		watch: {
			allNum() {
				this.storage()
			}
		},
		methods: {
			getCartList() {
				this.cartList = uni.getStorageSync("cart") || [];
			},
			checkboxs(id) {
				this.cartList.forEach((item, index) => {
					if (item.goods_id === id) {
						item.checked = !item.checked
					}
				})
				this.storage()
			},
			allCheck() {
				let checkAll = !this.checkboxAll
				this.cartList.forEach((item, index) => {
					item.checked = checkAll
				})
				this.storage()
			},
			storage() {
				this.$store.commit("CARTLIST", this.cartList)
				uni.setStorageSync("cart", this.cartList)
			},
			change(data) {
				this.txt = data.data.join('')
				console.log(this.txt)
			}
		}
	}
</script>

<style scoped>
	.cart {
		width: 100%;
	}

	.cart_item {
		margin-top: 20rpx;
		width: 100%;
		height: 300rpx;
		overflow: hidden;
		border: 1px solid #d3cbc4;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 20% 40% 40%;
	}

	.checkbox {
		text-align: center;
		line-height: 300rpx;
	}

	.img {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img image {
		width: 100%;
	}

	.handle {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.handle .price {
		color: red;
		font-size: 40rpx;
		font-weight: 500;
	}


	.floor {
		position: fixed;
		left: 0;
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		bottom: 50px;
		/* #endif */
		width: 100%;
		height: 100rpx;
		display: grid;
		grid-template-columns: 15% 30% 30% 25%;
		line-height: 100rpx;
		text-align: center;
	}

	.floor .allPric {
		color: red;
		font-size: 40rpx;
	}

	.floor .payment {
		color: #ffffff;
		font-size: 40rpx;
		background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
	}
</style>
